<template>
  <!-- 线上洽谈 -->
  <div class="liveTalk">
    <div class="talkTitle">
      <div>姓名</div>
      <div class="unit">单位</div>
      <div>职务</div>
      <div>行业</div>
      <div>手机号</div>
      <div class="Email">邮箱</div>
      <!-- <div>微信ID</div> -->
      <div class="address">联系地址</div>
      <div class="time">时间段</div>
      <div class="content">洽谈内容</div>
      <div class="agree">
        同意
        <el-checkbox v-model="check1"></el-checkbox>
      </div>
      <div>
        拒绝
        <el-checkbox v-model="check2"></el-checkbox>
      </div>
      <!-- <div @click="changeStatus(true)" style="background:#004CB3;color:#ffffff;">同意</div>
      <div @click="changeStatus(false)" style="background:#cccccc;color:#ffffff;">拒绝</div>-->
    </div>
    <div class="talkItem">
      <div class="itemBox" v-for="(item,index) in list" :key="index">
        <div>{{item.userName}}</div>
        <div class="unit">{{item.enterprise}}</div>
        <div>{{item.position}}</div>
        <div>{{item.industryInvolved}}</div>
        <div>{{item.phone}}</div>
        <div class="Email">{{item.mailbox}}</div>
        <div class="address">{{item.contactAddress}}</div>
        <div class="time">{{item.startTime}}</div>
        <div class="content">{{item.introduction}}</div>
        <!-- <div class="switch">
          <el-switch v-model= "value" active-color="#13ce66" inactive-color="#ff4949" @change="changeStatus"></el-switch>
        </div>-->
        <div class="switch">
          <el-checkbox v-model="check3"></el-checkbox>
        </div>
        <div class="switch">
          <el-checkbox v-model="check4"></el-checkbox>
        </div>
      </div>
    </div>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="prev, pager, next"
      :total="20"
    ></el-pagination>
  </div>
</template>
<script>
import { price } from "../../request/home";

export default {
  name: "",
  components: {},
  data() {
    return {
      check1: false,
      check2:false,
      check3: false,
      check4: false,
      tableData: [],
      checked: true,
      checked2: false,
      radio: "1",
      radio1: "1",
      list: [],
      pagesize: 3,
      value: "",
    };
  },
  created() {},
  methods: {
    changeStatus(back) {
      this.value = back;
    },
    checkBtn(index) {
      console.log(index);
      this.checked == !this.checked;
      this.checked2 == !this.checked2;
      //   if (this.checked == true) {
      //     this.checked2 = false;
      //   } else if ((this.checked2 = true)) {
      //     this.checked == false;
      //   }
    },
    handleCurrentChange(val) {
      price({ pageNum: val, pageSize: this.pagesize }).then((res) => {
        this.list = res.data.data.list;
      });
    },
    handleSizeChange(val) {
      this.pagesize = val;
    },
    save() {
      price({ pageNum: 1, pageSize: 3 }).then((res) => {
        console.log(res);
        this.list = res.data.data.list;
      });
    },
  },
  mounted() {
    this.save();
  },
};
</script>
<style lang='less' scoped>
// 线上洽谈
.liveTalk {
  .talkTitle {
    width: 15.3rem;
    height: 0.45rem;
    background: rgba(241, 241, 241, 1);
    display: flex;
    div {
      flex: 1;
      line-height: 0.45rem;
      text-align: center;
      font-size: 0.14rem;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: rgba(51, 51, 51, 1);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .unit,
    .Email,
    .time {
      flex: 2;
    }
    .address {
      flex: 2.5;
    }
    .content {
      flex: 1.5;
    }
  }
  .talkItem {
    width: 15.3rem;
    .itemBox {
      height: 0.45rem;
      border: 0.01rem solid rgba(238, 238, 238, 1);
      display: flex;
      div {
        flex: 1;
        line-height: 0.45rem;
        text-align: center;
        font-size: 0.14rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .unit,
      .Email,
      .time {
        flex: 2;
      }
      .address {
        flex: 2.5;
      }
      .content {
        flex: 1.5;
      }
    }
  }
}
</style>
